<template>
	<view class="page-user">

		<view class="p12" style="position: relative;z-index: 1;">

			<view class="bg-shaw bg-white brs10 p14">
				<view class="u-f-item u-f-jsb" v-if="user.isLogin" @click="toPage('/pages/user/setting/user')">
					<view class="u-f-item">
						<u-avatar size="112" :src="user.avatar"></u-avatar>
						<view class="pl8">
							<view class="fz18 u-font-bold">{{user.nickname}}</view>

						</view>
					</view>
					<u-icon name="arrow-right" color="#000"></u-icon>
				</view>
				<view class="u-p-15 u-f-item u-f-jsb" v-else @click="toPage('/pages/user/auth/auth')">
					<view class="u-f-item">
						<u-avatar size="112"></u-avatar>
						<view class="u-p-l-20">
							<view class="fz18 u-font-bold">登录/注册</view>
						</view>
					</view>
					<u-icon name="arrow-right" color="#000"></u-icon>
				</view>




				<view class="u-flex mt20" style="text-align: center;">
					<view class="u-f1" style="position: relative;" @tap="$wanlshop.auth('/pages/user/money/list')">
						<view class="u-font-bold fz24 add-br" style="color: #1a2a7e;">{{ user.money?user.money:'0.00' }}
						</view>
						<view class="fz12 c6 mt10">积分</view>
					</view>
					<view class="u-f1" style="position: relative;">
						<view class="u-font-bold fz24 " style="color: #1a2a7e;">{{user.receiveCount || 0}}
						</view>
						<view class="fz12 c6 mt10">优惠券</view>
					</view>
				</view>

			</view>
			<view class="mt15 bg-shaw bg-white brs10 p14">
				<view class="u-flex u-f-jsb" @click="toPage('/pages/user/order/order')">
					<view class="c0 u-font-bold fz14">我的订单</view>
					<view class="u-flex fz12" style="color: #9AA1AB;">
						全部订单
						<u-icon name="arrow-right" color="#9AA1AB"></u-icon>
					</view>
				</view>
				<view class="mt15">
					<view class=" u-flex">
						<view class="pt12 pb12 u-f1" style="position: relative;" v-for="(item, index) in orderList"
							:key="index" @click="toPage(item.path)">
							<image :src="item.img" style="width:73rpx;height:75rpx;display: block;margin: 0 auto;">
							</image>
							<view class="fz12 c6 u-flex u-f-justify mt6">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>


			<view class="">
				<view class="bg-shaw bg-white u-flex mt15 p12 brs10" style="position: relative;"
					v-for="(item, index) in actionList" :key="index" @click="toPage(item.path)">
					<image :src="item.img" mode="aspectFill" style="width:56rpx;height:56rpx;"></image>
					<view class="fz13 pl8">{{ item.title }}</view>
					<!-- <button class="kefu-btn" open-type="contact" v-if="item.path=='kefu'">
						联系客服
					</button> -->
				</view>
			</view>
		</view>

		<u-popup v-model="isShowCode" mode="center" :closeable="false" border-radius="15">
			<view class="p20">
				<view>
					<image :show-menu-by-longpress="true" :src="codeUrl" mode="widthFix" style="width:500rpx"></image>
				</view>

				<view class="c9 fz12 u-f-justify">长按识别二维码保存</view>
			</view>
		</u-popup>
	</view>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isLogin: false,
				codeUrl: '',
				bgUrl: 'https://dianche.oss-cn-shenzhen.aliyuncs.com/bg-user.png',
				background: {
					background: ''
				},
				carList: [],
				repairNum: {},
				vipBg: '',
				isShowCode: false,
				showType: false,
				userInfo: {},
				authInfo: {},
				recharge_switch: '0',
				walletInfo: {},
				imCount: {},
				curTab: 4,
				gradeInfo: {},
				curBanner: {},
				serve_phone:'',
				brokerageInfo: {},
				companyInfo: {},
				orderList: [
				// 	{
				// 	title: '未付款',
				// 	path: '/pages/user/order/order?tab=1',
				// 	img: '../static/images/order1.png'

				// }, 
				{
					title: '待发货',
					path: '/pages/user/order/order?state=1',
					img: '../static/images/order2.png'

				}, {
					title: '已发货',
					path: '/pages/user/order/order?state=2',
					img: '../static/images/order3.png'

				}, {
					title: '已完成',
					path: '/pages/user/order/order?state=3',
					img: '../static/images/order4.png'

				},
				
				
				{
					title: '退货/售后',
					path: '/pages/user/refund/lists',
					img: '../static/images/order5.png'

				},
				],
				actionList: [ {
						title: '预约记录',
						path: '/pages/user/appointment/list',
						img: '../static/images/t8.png'
					},
					// {
					// 	title: '地址管理',
					// 	path: '/pages/user/address/index',
					// 	img: '../static/images/act1.png'

					// },
					// {
					// 	title: '积分兑换',
					// 	path: '/pages/sale/list',
					// 	img: '../static/images/act3.png'

					// },
					{
						title: '支付密码',
						path: '/pages/user/setting/password',
						img: '../static/images/act8.png'
					
					},{
						title: '客服中心',
						path: 'kefu',
						img: '../static/images/act4.png'

					},

				],
			}
		},
		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		onLoad() {},
		onShow() {

			if (this.$store.state.user.isLogin) {
				this.loadData();
			}
			uni.request({
				url: '/wanlshop/index/site',
				method: 'POST',
				success: res => {
					this.serve_phone=res.res.data.serve_phone
				}
			});
			
		},
		methods: {

			async loadData() {
				await uni.request({
					url: '/wanlshop/user/refresh',
					method: 'POST',
					success: res => {
						this.$store.commit('statistics/edit', res.data.statistics);
						this.$store.commit('user/setUserInfo', res.data.userinfo);
					}
				});
				uni.stopPullDownRefresh();
			},
			toPage(url){
				if(url=='kefu'){
					uni.makePhoneCall({
						phoneNumber:String(this.serve_phone)
					})
					return
				}
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-user {
		min-height: 100vh;
	}

	.btn {
		width: 144rpx;
		height: 50rpx;
		text-align: center;
		color: #fff;
		line-height: 50rpx;
		background: #ABC7C9;
		border-radius: 40px;
	}


	.kefu-btn {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
		opacity: 0;
	}

	.module-vip {
		position: relative;

		.bg-vip {
			display: block;
			width: 100%;
			height: 140rpx;
		}

		.bg-vip-bottom {

			position: absolute;
			bottom: 0;
			z-index: 1;
			left: 0;
			right: 0;
			height: 48rpx;
			width: 100%;
		}

		.vip-info {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			color: #fff;
			padding: 24rpx 36rpx;
		}

		.btn-vip {
			background: linear-gradient(135deg, #FEFEFE 0%, #C1F3FA 50%, #A5DAFA 100%);
			border-radius: 16rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 24rpx;
			color: #19291C;
			padding: 10rpx 24rpx;
		}
	}

	.btn-edit {
		background: #E57718;
		border-radius: 27rpx;
		font-family: Source Han Sans CN;
		font-size: 26rpx;
		color: #fff;
		padding: 8rpx 30rpx;

	}

	.line {
		width: 702px;
		height: 4px;
		background: #F6F9F9;
		border-radius: 0px 0px 0px 0px;
	}

	.bg-user {
		position: absolute;
		z-index: 1;
		top: 0;
		width: 100%;

	}

	.add-br {
		border-right: 1px solid #CDE5FF;
		// height: 32rpx;
		// line-height: 32rpx;
	}

	.modal-code {
		width: 654rpx;
		position: relative;
		padding: 136rpx 40rpx 0;

		.code-bg2 {
			position: absolute;
			top: 0;
			left: 0;
		}

		.code-content {
			position: relative;
			z-index: 1;
			width: 574rpx;
			height: 538rpx;
			background: url('https://dianche.oss-cn-shenzhen.aliyuncs.com/code-bg1.png') no-repeat center;
			background-size: 100% 100%;
			text-align: center;

		}

		.my-code {
			background: rgba(255, 255, 255, 0.4);
			border-radius: 20rpx;
			padding: 28rpx;
			display: inline-block;
		}

		.code-btn {
			border-radius: 50px;
			background: linear-gradient(180deg, #7AC7FF 0%, #0A89FF 100%);
			color: #FFF;

			text-align: center;
			font-family: "PingFang SC";
			font-size: 14px;

		}

	}

	.img1 {
		fill: rgba(255, 255, 255, 0.80);

		filter: drop-shadow(0px 0px 21.6px rgba(67, 154, 236, 0.40));

		backdrop-filter: blur(6px);
		border-radius: 50%;
	}
</style>